<template>
  <div class="nav">
    <img src="../assets/Logo.png" />
    <router-link to="/search">
    <form action="/">
      <van-search
        v-model="value"
        shape="round"
        placeholder="搜索你感兴趣的新闻"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    </router-link>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Topnav",
  data() {
    return {
      value: "",
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      //   Toast("取消");
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  overflow: hidden;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 333;
  background-color: #fff;
}
.nav img {
  width: 60px;
  height: 60px;
  margin-left: 3px;
  float: left;
}
/deep/.van-search {
  float: right;
  width: calc(100% - 75px);
  margin-left: 5px;
  height: 60px;
}
</style>